<%@ page import="java.util.List" %>
<%@ page import="com.aivin.entity.TbPic" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 引入jstl -->
<%@include file="common/tag.jsp"%>
<html>
<head>
    <title> findYou - Home </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <%-------######################-------------%>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="mycss/swiper.min.css">
    <%--搜索栏css--%>
    <link rel="stylesheet" href="mycss/searchbox.css">
    <%--图片轮播css--%>
    <link rel="stylesheet"  href="mycss/mySwiptercss.css">
    <%-------######################-------------%>

    <!--加载更多  瀑布流css-->
    <link rel="stylesheet" type="text/css" href="mycss/mywaterfall.css">
    <link rel="stylesheet" type="text/css" href="mycss/base.css">
    <link rel="stylesheet" type="text/css" href="mycss/index.css">
    <!--[if lt IE 9]>
    <script src="myjs/css3-mediaqueries.js"></script>
    <![endif]-->
    <script type="text/javascript" src="myjs/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="myjs/jQueryColor.js"></script>
    <!--这个插件是瀑布流主插件函数必须-->
    <script type="text/javascript" src="myjs/jquery.masonry.min.js"></script>
    <!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
    <script type="text/javascript" src="myjs/jQeasing.js"></script>
    <%-------end 加载更多  瀑布流css######################-------------%>

    <%--结尾--%>
    <link rel="stylesheet" href="mycss/homefoot.css">
</head>


<body  onload="test1()">
<%-------######################-------------%>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="http://hnyer-bos-test.gz.bcebos.com/p1.jpg" width="100%"/></div>
        <div class="swiper-slide"><img src="http://hnyer-bos-test.gz.bcebos.com/p2.jpg" width="100%"/></div>
        <div class="swiper-slide"><img src="http://hnyer-bos-test.gz.bcebos.com/p3.jpg" width="100%"/></div>
        <div class="swiper-slide"><img src="http://hnyer-bos-test.gz.bcebos.com/p4.jpg" width="100%"/></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<%-------######################-------------%>


<%-------######################-------------%>
<!-- Swiper JS -->
<script src="myjs/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 1500,
        autoplayDisableOnInteraction: false
    });
</script>

<%--搜索栏--%>
<div class="search-box">
    <form method="post" action="http://localhost:8081/findYou/search/searchKeyWord" class="new-searching-unit" data-regestered="regestered"  target="_blank">
        <input id="query"
               type="text"
               size="27"
               name="keyWord"
               autocomplete="off"
               placeholder="请输入你喜欢的关键词"
               value="">
        <a href="#" onclick="return false;" class="go"></a>
    </form>

</div>
<%-------######################-------------%>


<%--瀑布流 --%>
<div class="my-waterfall">
    <!-- 瀑布流样式开始 -->
    <div class="waterfull clearfloat" id="waterfull">
        <ul>

        </ul>
    </div>
    <!-- loading按钮自己通过样式调整 -->
    <div id="imloading"
         style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
        正在加载.....
    </div>
    <div class="get-more-line">
        <a href="javascript:" class="get-more-line" id="get-more-line">加载更多</a>
    </div>

</div>
<%--end瀑布流 --%>


<%-----------------------结尾布局----------------------------------------------------------------%>
<div  id="index_footer" >
    <div class="column">
        <a class="title">移动客户端</a>
        <a href="http://www.baidu.com" rel="nofollow">iphone版</a>
        <a href="http://www.baidu.com" rel="nofollow">android版</a>
    </div>

    <div class="column follow-us">
        <a class="title">关注我们</a>
        <a href="http://weibo.com/huabanwang" target="_blank" rel="nofollow">新浪微博：@dome</a>
        <a>官方 QQ：123456789</a>
        <a class="weixin">
            官方微信：
            <img src="myimg/about_footer_code.png" data-baiduimageplus-ignore="1">
            <img src="myimg/weixin_dome.png" data-baiduimageplus-ignore="1" class="code">
        </a>
    </div>

    <div class="wrapper wrapper-996 bottom">
        © DOME 广州XXXXX有限公司 &nbsp;&nbsp;
        <span class="divider">|</span>
        &nbsp;&nbsp;
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602001878">广东网安备 XXXX01878号</a></div>

</div>
<%----end  index_footer----%>




<%--瀑布流js--%>
<script>
    /*瀑布流开始*/
    var container = $('.waterfull ul');
    var loading = $('#imloading');
    // 初始化loading状态
    loading.data("on", true);
    /*判断瀑布流最大布局宽度，最大为1280*/
    function tores() {
        var tmpWid = $(window).width();
//        if (tmpWid > 1280) {
//            tmpWid = 1280;
//        } else {
            var column = Math.floor(tmpWid / 320);
            tmpWid = column * 320;
//        }
        $('.waterfull').width(tmpWid);
    }

    tores();
    $(window).resize(function () {
        tores();
    });
    container.imagesLoaded(function () {
        container.masonry({
            columnWidth: 320,
            itemSelector: '.item',
            isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
            isAnimated: true,//是否采用jquery动画进行重拍版
            isRTL: false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
            isResizable: true,//是否自动布局默认true
            animationOptions: {
                duration: 800,
                easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                queue: false//是否队列，从一点填充瀑布流
            }
        });
    });





    //js接收json字符串
    var jsonStr0='${jsonStr}';
    //将json字符串转换成 数组
    var jsonStr=eval('('+jsonStr0+')');

//    var jsonFy ;
    var jsonFy=jsonFy||[];

//
    function     getPicData(  start ,end){
        $.ajax({
            type: "POST",
            url: "http://localhost:8081/findYou/indexWithParame",
            data: {
                offset: start,
                limit:  end
            },
            dataType: "text",
            success: function(data){
                jsonFy=eval('('+data+')');
                test2( );
            },
            error: function(jqXHR){
                alert("通信异常：" + jqXHR.status);
            },
        }); //end ajax

    }


    function test2( ) {

        if (!loading.data("on")) return;
        // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
        var itemNum = $('#waterfull').find('.item').length;

        var itemArr = [];
//        itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
//        itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
//        itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
        itemArr[0] =410;
        itemArr[1] =410;
        itemArr[2] =410;


        var maxTop = Math.max.apply(null, itemArr);
        if (maxTop < $(window).height() + $(document).scrollTop()) {
            //加载更多数据
            loading.data("on", false).fadeIn(800);
            (function (jsonFy) {
                /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/

                console.log("itemNum= >>>> "+itemNum);
                if (itemNum > 500) {
                    loading.text('没有更多数据了');
                } else {
                    var html = "";



                    for (var i in jsonFy) {
                        html += "<li class='item'><a href='https://www.baidu.com/'  target='_blank'   class='a-img'><img src='" + jsonFy[i].picUrl + "'></a>";
                        html += "<h2 class='li-title'>" + jsonFy[i].picInfo + "</h2>";
                        html +=   "<div class='qianm clearfloat'>";
                        html +=   "<span class='sp3'>" + jsonFy[i].regTime + " </span></div></li>";
                    }


                    var time = setTimeout(function () {
                        $(html).find('img').each(function (index) {
                            loadImage($(this).attr('src'));
                        }) ;
                        var $newElems = $(html).css({opacity: 0}).appendTo(container);
                        $newElems.imagesLoaded(function () {
                            $newElems.animate({opacity: 1}, 800);
                            container.masonry('appended', $newElems, true);
                            loading.data("on", true).fadeOut();
                            clearTimeout(time);
                        });
                    }, 0 * 0)
                }
            })(jsonFy);
        }
    } //end  test2




    function test1() {
        if (!loading.data("on")) return;
        // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
        var itemNum = $('#waterfull').find('.item').length;

        var itemArr = [];
//        itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
//        itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
//        itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;

//        console.log(Console);
        itemArr[0] =410;
        itemArr[1] =410;
        itemArr[2] =410;


        var maxTop = Math.max.apply(null, itemArr);
        if (maxTop < $(window).height() + $(document).scrollTop()) {
            //加载更多数据
            loading.data("on", false).fadeIn(800);
            (function (jsonStr) {
                /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/

                console.log("itemNum= >>>> "+itemNum);
                if (itemNum > 500) {
                    loading.text('没有更多数据了');
                } else {
                    var html = "";


                    for (var i in jsonStr) {
                        html += "<li class='item'><a href='https://www.baidu.com/'  target='_blank'   class='a-img'><img src='" + jsonStr[i].picUrl + "'></a>";
                        html += "<h2 class='li-title'>" + jsonStr[i].picInfo + "</h2>";
                        html +=   "<div class='qianm clearfloat'>";
                        html +=   "<span class='sp3'>" + jsonStr[i].regTime + " </span></div></li>";
                    }

                    /*模拟ajax请求数据时延时800毫秒*/
                    var time = setTimeout(function () {
                        $(html).find('img').each(function (index) {
                            loadImage($(this).attr('src'));
                        }) ;
                        var $newElems = $(html).css({opacity: 0}).appendTo(container);
                        $newElems.imagesLoaded(function () {
                            $newElems.animate({opacity: 1}, 800);
                            container.masonry('appended', $newElems, true);
                            loading.data("on", true).fadeOut();
                            clearTimeout(time);
                        });
                    }, 800 * 0)
                }
            })(jsonStr);
        }
    } //end  test1

    function loadImage(url) {
        var img = new Image();
        //创建一个Image对象，实现图片的预下载
        img.src = url;
        if (img.complete) {
            return img.src;
        }
        img.onload = function () {
            return img.src;
        };
    };

    /*item hover效果*/
//    var rbgB = ['#71D3F5', '#F0C179', '#F28386', '#8BD38B'];
    var rbgB = ['#8BD38B', '#8BD38B', '#8BD38B', '#8BD38B'];
    $('#waterfull').on('mouseover', '.item', function () {
        var random = Math.floor(Math.random() * 4);
        $(this).stop(true).animate({'backgroundColor': rbgB[random]}, 1000);
    });

    $('#waterfull').on('mouseout', '.item', function () {
                $(this).stop(true).animate({'backgroundColor': '#fff'}, 1000);
            }
    );




    var  pageindex =2 ;//当前页数
    var pageSize =10 ;//页数大小
    //点击更多加载
    $("#get-more-line").click(function () {
        var  startIndex = (pageindex - 1) * pageSize;
        var endIndex =   pageSize ;
        getPicData(startIndex ,endIndex);
        pageindex++ ;
    });


</script>







</body>
</html>
